import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { getRoleList } from './columns';

const UserModal: React.FC = ({ modalInfo, operateType, open, onOpenChange, onFinish }) => {
  // 提交按钮
  const prevFinish = (values) => {
    onFinish(values);
  };

  if (!open) {
    return null;
  }

  return (
    <ModalForm
      layout="horizontal"
      width={480}
      title={`${operateType === 'add' ? '添加' : '修改'}用户账号`}
      open={open}
      onOpenChange={onOpenChange}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => onOpenChange(false),
      }}
      onFinish={prevFinish}
    >
      <ProFormText
        name="account"
        label="账号"
        initialValue={modalInfo?.account}
        disabled={operateType === 'edit'}
        placeholder="请输入账号（邮箱格式）"
        rules={[
          { required: true, message: '请输入账号' },
          { type: 'email', message: '请输入账号（邮箱格式）' },
        ]}
        fieldProps={{
          maxLength: 50,
        }}
      />
      <ProFormText
        name="username"
        label="用户名"
        initialValue={modalInfo?.username}
        rules={[{ required: true, message: '请输入用户名' }]}
        fieldProps={{
          maxLength: 50,
        }}
      />
      <ProFormSelect
        name="roleId"
        label="权限"
        initialValue={modalInfo?.roleId}
        rules={[{ required: true, message: '请选择权限' }]}
        request={getRoleList}
      />
      {operateType === 'add' ? (
        <ProFormText
          name="password"
          label="密码"
          width={240}
          fieldProps={{
            type: 'password',
            minLength: 8,
            maxLength: 16,
          }}
          placeholder="请输入8-16位数字+字母的密码"
          rules={[
            { required: true, message: '请输入密码' },
            {
              pattern: /^(?=.*[a-zA-Z])(?=.*\d).{8,16}$/,
              message: '请输入8-16位数字+字母的密码',
            },
          ]}
        />
      ) : null}
    </ModalForm>
  );
};

export default UserModal;
